import React, { Component } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import TRNotification from '@/utils/notification';
import styles from './index.less';
import { Spin } from 'antd';

class PLoadingComponent extends Component {
  render() {
    const { title, containerStyle = {}, messageStyle = {} } = this.props;
    return (
      <div className={styles.loading_box}>
        <div className={styles.container} style={containerStyle}>
          <FacebookProgress />
          <div className={styles.message} style={messageStyle}>
            {title}
          </div>
        </div>
      </div>
    );
  }
}

function FacebookProgress(props) {
  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
  return (
    <div>
      <Spin indicator={antIcon} {...props} />
    </div>
  );
}

class PLoadingModal {
  __key__ = '';
  show = (title, containerStyle, messageStyle) => {
    return new Promise(() => {
      if (this.__key__ !== '') {
        return;
      }
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <PLoadingComponent
            title={title}
            containerStyle={containerStyle}
            messageStyle={messageStyle}
          />
        ),
        duration: null,
      });
    });
  };

  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

const pLoading = new PLoadingModal();
export default pLoading;
